<template>
  <div class="data-dashboard">
    <div style="background-color: #fff;" v-if="isDetail">
      <el-page-header class="page-header" @back="goBack" :content="title">
      </el-page-header>
    </div>
    <div class="analysis-head" v-loading="loading">
      <div class="a-head-left">
        <div>
          <img src="../assets/images/browser_num.png" />
          <div>
            <span class="data-num">{{analysisData.browseNumber || '--'}}</span>
            <span class="data-label">浏览总量</span>
          </div>
          <div>
            <span class="data-num">{{analysisData.todayPageView || '--'}}</span>
            <span class="data-label">今日浏览量</span>
          </div>
        </div>
        <div>
          <img src="../assets/images/share_num.png" />
          <div>
            <span class="data-num">{{analysisData.totalShare || '--'}}</span>
            <span class="data-label">分享总量</span>
          </div>
          <div>
            <span class="data-num">{{analysisData.shareToday || '--'}}</span>
            <span class="data-label">今日分享量</span>
          </div>
        </div>
        <div>
          <img src="../assets/images/like_num.png" />
          <div>
            <span class="data-num">{{analysisData.thumbUpTotal || '--'}}</span>
            <span class="data-label">点赞总量</span>
          </div>
          <div>
            <span class="data-num">{{analysisData.todayThumbUpTotal || '--'}}</span>
            <span class="data-label">今日点赞量</span>
          </div>
        </div>
      </div>
      <div class="a-head-right">
        <div class="right-top">
          <div>
            <span>{{analysisData.totalInstalledBase || '--'}}</span>
            <span>用户总数</span>
          </div>
          
          <div>
            <span>{{analysisData.totalUsersToday || '--'}}</span>
            <span>今日用户数</span>
          </div>
          <div>
            <span>{{analysisData.newUsersNum || '--'}}</span>
            <span>新增用户数</span>
          </div>
        </div>

        <div class="right-bottom">
          <div @click="goArticleList">
            <img src="../assets/images/article_num.png" />
            <div>
              <span>{{analysisData.articlenum || '--'}}</span>
              <span>文章数</span>
            </div>
          </div>
          <div @click="goVideoList">
            <img src="../assets/images/video_num.png" />
            <div>
              <span>{{analysisData.videonum || '--'}}</span>
              <span>视频数</span>
            </div>
          </div>
          <div>
            <img src="../assets/images/wait_num.png" />
            <div>
              <span>{{analysisData.unreviewednum || '--'}}</span>
              <span>待审核</span>
            </div>
          </div>
          <div>
            <img src="../assets/images/pass_num.png" />
            <div>
              <span>{{analysisData.checkednum || '--'}}</span>
              <span>已审核</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="analysis-body">
      <div class="body-item">
        <div class="item-title">
          点赞量 Top10
        </div>
        <div class="top-box">
          <div
            class="top-item"
            v-for="(item, index) in likeTop10"
            :key="index"
            @click="goKnowledgeDetail(item)"
          >
            <div>
              <span
                :class="index < 3 ? 'active' : ''"
              >{{index + 1}}</span>
              <span>{{item.knowledgeName}}</span>
            </div>
            <div>
              <span>{{item.createDate}}</span>
              <span>{{item.thumbUpTotal}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="body-item">
        <div class="item-title">
          分享量 Top10
        </div>
        <div class="top-box">
          <div
            class="top-item"
            v-for="(item, index) in shareTop10"
            :key="index"
            @click="goKnowledgeDetail(item)"
          >
            <div>
              <span
                :class="index < 3 ? 'active' : ''"
              >{{index + 1}}</span>
              <span>{{item.knowledgeName}}</span>
            </div>
            <div>
              <span>{{item.createDate}}</span>
              <span>{{item.totalShare}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="body-item">
        <div class="item-title">
          浏览量 Top10
        </div>
        <div class="top-box">
          <div
            class="top-item"
            v-for="(item, index) in browserTop10"
            :key="index"
            @click="goKnowledgeDetail(item)"
          >
            <div>
              <span
                :class="index < 3 ? 'active' : ''"
              >{{index + 1}}</span>
              <span>{{item.knowledgeName}}</span>
            </div>
            <div>
              <span>{{item.createDate}}</span>
              <span>{{item.browseNumber}}</span>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
import { TimeSelect } from 'element-ui';
import {
  getFindAnalysisData,
  getLikeTop10,
  getShareTop10,
  getBrowserTop10
} from '../api/version2'
import { formatDate } from '../util';
export default {
  name: 'DataAnalysis',
  data () {
    return {
      isDetail: false,
      analysisData: {
        browseNumber: '0', // 浏览总量
        todayPageView: '0', // 今日浏览量
        totalShare: '0', // 分享总量
        shareToday: '0', // 今日分享量
        thumbUpTotal: '0', // 点赞总量
        todayThumbUpTotal: '0', // 今日点赞量
        articlenum: '0', // 文章数
        videonum: '0', // 视频数
        unreviewednum: '0', // 未审核数
        checkednum: '0', // 已审核数
        totalInstalledBase: '0', //用户总数
        totalUsersToday: '0', // 今日用户总数
        newUsersNum: '0', // 今日新增用户
      },
      loading: false,
      enterpriseId: '',
      likeTop10: [],
      shareTop10: [],
      browserTop10: [],
      title: '',
      datas: Array(10).fill({
        title: '这是一篇文章啊',
        date: '2020.11.05 12：50',
        num: 180
      })
    }
  },
  methods: {
    goBack () {
      history.back()
    },
    fetchAnalysisData () { // 获取统计数据
      this.loading = true;
      getFindAnalysisData(this.enterpriseId)
      .then(res => {
        this.loading = false;
        let obj = res.data.data || {};
        for (let key in obj) {
          obj[key] = String(obj[key]);
          this.loadingData(key, obj[key])
        };
        
        // this.analysisData = obj
      })
      .catch(e => {
        this.loading = false
      })
    },
    fetchLikeTop10 () { // 获取点赞top10
      getLikeTop10(this.enterpriseId)
      .then(res => {
        let list = res.data.data || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        this.likeTop10 = list
      })
      .catch(e => {

      })
    },
    loadingData (key, num) { // 倒计时数字
      const that = this;
      let interval = 5;
      let timer = setInterval(() => {
        if (that.analysisData[key] == num) {
          clearInterval(timer);
          return
        };
        that.analysisData[key] ++;
      }, interval)
    },
    goKnowledgeDetail (row) { // 进入知识详情
      console.log(row);
      let url = '';
      if (row.knowledgeType == '0') {
        url = '/operation/article/detail/' + row.knowledgeId
      } else if (row.knowledgeType == '1') {
        url = '/operation/video/detail/' + row.knowledgeId
      };
      this.$router.push(url)
    },
    fetchShareTop10 () { // 获取分享top10
      getShareTop10(this.enterpriseId)
      .then(res => {
        let list = res.data.data || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        this.shareTop10 = list
      })
      .catch(e => {

      })
    },
    fetchBrowserTop10 () { // 获取浏览top10
      getBrowserTop10(this.enterpriseId)
      .then(res => {
        let list = res.data.data || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        this.browserTop10 = list
      })
      .catch(e => {

      })
    },
    goArticleList () { // 进入文章列表
      this.$router.push('/operation/article/list')
    },
    goVideoList () { // 进入视频列表
      this.$router.push('/operation/video/list')
    }
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    let query = this.$route.query;
    if (query.enterpriseId) {
      this.isDetail = true;
      this.enterpriseId = query.enterpriseId
    } else {
      this.enterpriseId = sessionStorage.getItem('enterpriseId')
    };
    this.fetchAnalysisData();
    this.fetchLikeTop10();
    this.fetchShareTop10();
    this.fetchBrowserTop10()
  }
}
</script>
<style lang="scss">
  .data-dashboard {
    min-height: calc(100vh - 3.75rem /* 60/16 */);
    background-color: #F4F4F4;
  }
  .analysis-head {
    display: flex;
    padding: 3.125rem /* 50/16 */ 4.375rem /* 70/16 */;
    background-color: #fff;
    .a-head-left {
      display: flex;
      padding-top: 2.125rem /* 34/16 */;
      & > div {
        display: flex;
        margin-right: 4.375rem /* 70/16 */;
        flex-direction: column;
        align-items: center;
        span {
          display: block;
        }
        &:last-child {
          margin-right: 0;
        }
        img {
          width: 3.4375rem /* 55/16 */;
          height: 3.4375rem /* 55/16 */;
        }
        .data-num {
          padding-top: 2.1875rem /* 35/16 */;
          font-size: 1.875rem /* 30/16 */;
          color: #242424;
          font-weight: bold;
        }
        .data-label {
          padding-top: .25rem /* 4/16 */;
          font-size: .875rem /* 14/16 */;
          color: #909399;
        }
      }
    }
  }
  .a-head-right {
    flex: 1;
    margin-left: 6.25rem /* 100/16 */;
    .right-top {
      display: flex;
      justify-content: space-between;
      & > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1.875rem /* 30/16 */ 0 1.875rem /* 30/16 */ 3.75rem /* 60/16 */;
        width: calc((100% - 6.25rem /* 100/16 */) / 3);
        height: 9.375rem /* 150/16 */;
        border-radius: 1.25rem /* 20/16 */;
        box-sizing: border-box;
        span:nth-of-type(1) {
          font-size: 2.5rem /* 40/16 */;
          color: #fff;
          font-weight: bold;
        }
        span:nth-of-type(2) {
          font-size: 1.1875rem /* 19/16 */;
          color: rgba(255, 255, 255, .69);
          font-weight: bold;
        }
        &:nth-of-type(1) {
          background: linear-gradient(77deg, #38C0E2 0%, #8BE0F1 100%);
        }
        &:nth-of-type(2) {
          background: linear-gradient(320deg, #FDA5A0 0%, #FC6B93 100%);
        }
        &:nth-of-type(3) {
          background: linear-gradient(282deg, #6E7FFF 0%, #3661FF 100%);
        }
      }
    }
  }
  .right-bottom {
    display: flex;
    margin-top: 4.375rem /* 70/16 */;
    align-items: center;
    & > div {
      flex: 1;
      display: flex;
      padding-right: 1.25rem /* 20/16 */;
      align-items: center;
      transition: .4s ease-in-out;
      cursor: pointer;
      &:hover {
        background-color: #f8f8f8;
      }
      img {
        margin-right: 1.25rem /* 20/16 */;
        width: 4.375rem /* 70/16 */;
        height: 4.375rem /* 70/16 */;
      }
      div {
        span {
          display: block;
          &:nth-of-type(1) {
            font-size: 2.0625rem /* 33/16 */;
            color: #333333;
          }
          &:nth-of-type(2) {
            font-size: .875rem /* 14/16 */;
            color: #909399;
          }
        }
      }
    }
  }
  .analysis-body {
    display: flex;
    justify-content: space-between;
    margin: 3.25rem /* 52/16 */ 3.125rem /* 50/16 */ 0 3.125rem /* 50/16 */;
    padding-bottom: 3.75rem /* 60/16 */;
    .body-item {
      padding: 1.4375rem /* 23/16 */ 0 0 0;
      width: calc((100% - 2.5rem /* 40/16 */) / 3);
      background-color: #fff;
      border-radius: .9375rem /* 15/16 */;
      box-sizing: border-box;
      .item-title {
        padding-bottom: 1.25rem /* 20/16 */;
        font-size: 1.1875rem /* 19/16 */;
        color: #333;
        text-align: center;
        border-bottom: 1px solid #F4F4F4;
      }
    }
  }
  .top-box {
    padding: 1.875rem /* 30/16 */ 2.5rem /* 40/16 */;
    .top-item {
      display: flex;
      margin-bottom: 1rem /* 16/16 */;
      justify-content: space-between;
      cursor: pointer;
      transition: .4s;
      &:hover {
        background-color: #f8f8f8;
      }
      &:last-child {
        margin-bottom: 0;
      }
      & > div:nth-of-type(1) {
        margin-right: 1.25rem /* 20/16 */;
        span:nth-of-type(1) {
          display: inline-block;
          margin-right: .9375rem /* 15/16 */;
          width: 1.5rem /* 24/16 */;
          height: 1.5rem /* 24/16 */;
          text-align: center;
          line-height: 1.5rem /* 24/16 */;
          border-radius: .375rem /* 6/16 */;
          background-color: #EDEDED;
          font-size: .75rem /* 12/16 */;
          color: #fff;
          &.active {
            background-color: #FF6F6F;
          }
        }
        span:nth-of-type(2) {
          font-size: .875rem /* 14/16 */;
          color: #919191;
        }
      }
      & > div:nth-of-type(2) {
        // width: 9.0625rem /* 145/16 */;
        flex-shrink: 0;
        span:nth-of-type(1) {
          padding-right: 1.25rem /* 20/16 */;
          font-size: .75rem /* 12/16 */;
          color: #CCCCCC;
        }
        span:nth-of-type(2) {
          font-size: .75rem /* 12/16 */;
          color: #FF6F6F;
        }
      }
    }
  }
</style>
